<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" label-suffix="：" v-loading="loading">
            <div class="order-card" v-for="(item, index) in model.list" :key="index">
                <div class="card-header header-title">
                    <span class="header-title-title">{{ item.name }}</span>
                    <el-tag type="info">{{ item.sku }}</el-tag>
                </div>
                <div class="card-content">
                    <el-form-item label="反馈问题" :prop="`list[${index}]qustion_id`">
                        <el-cascader
                            v-model="item.qustion_id"
                            :options="dict.questionList"
                            :props="{ multiple: true, placeholder: '请选择反馈问题' }"
                            clearable
                            :show-all-levels="false"
                            style="width: 90%"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="问题详情" :prop="`list[${index}]note`">
                        <el-input v-model="item.note" type="textarea" rows="4" clearable style="width: 90%"></el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getQuestionList, queryFeedback, editFeedback } from '@/api/order'

export default {
    name: 'ProductDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            dict: {
                questionList: [],
            },
            model: {
                list: [],
            },
            rules: {
                qustion_id: [{ required: true, message: '反馈问题不能为空', trigger: ['blur', 'change'] }],
                note: [{ required: true, message: '问题详情不能为空', trigger: ['blur', 'change'] }],
            },
        }
    },
    computed: {
        title() {
            return `编辑订单反馈`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    async mounted() {
        this.loading = true
        try {
            const questionData = await getQuestionList()
            this.dict.questionList = questionData?.data ?? []
            this.getDetail()
        } catch (error) {
            //
            console.log(error)
        }
        this.loading = false
    },
    methods: {
        submit() {
            const params = { ...this.model }
            this.save = true
            editFeedback(params)
                .then(res => {
                    this.$message.success(res.msg)
                    this.$emit('success')
                    this.dialogVisible = false
                })
                .finally(() => {
                    this.save = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
        getDetail() {
            this.loading = true
            const params = { order_id: this.params.order_id }
            queryFeedback(params)
                .then(res => {
                    this.model.list = res.data
                    this.model.list.map(item => {
                        item.qustion_id = this.formateQuestion(item.qustion_id, this.dict.questionList)
                        return { ...item }
                    })
                })
                .finally(() => {
                    this.loading = false
                })
        },
        formateQuestion(targetList, list) {
            return targetList.map(target => {
                target = target.toString()
                // 在list中查找对应的value和其父节点的value
                for (let i = 0; i < list.length; i++) {
                    const parentValue = list[i].value
                    const children = list[i].children
                    for (let j = 0; j < children.length; j++) {
                        if (children[j].value === target) {
                            return [parentValue, target]
                        }
                    }
                }
            })
        },
    },
}
</script>

<style scoped>
.order-page {
    min-height: 100%;
    background: #f1f1f1;
}
.order-header {
    margin-bottom: 24px;
    padding-left: 24px;
}
.header-title-title {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    margin-right: 8px;
}

.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 24px 0 24px;
    margin-bottom: 16px;
    box-shadow: 0 0 4px #eee;
}
.card-content {
    margin: 0;
    padding: 16px 0 1px 0;
    border: none;
}

.text-bold {
    font-weight: bold;
}
.text-primary {
    color: #11a983;
}
</style>
